import QtQuick 2.12
import QtQuick.Controls 1.4
import Qt.labs.qmlmodels 1.0
import CustomerModel 1.0

Item {
    id: root
    anchors.fill: parent

    CustomListTableModel {
        id: lstModel
    }

    TableView {
        id: tableView
        anchors.fill: parent
        // header
        TableViewColumn { role: "is_selected"; title: "选择"; width: root.width / 13;  }
        TableViewColumn { role: "order_num"; title: "订单编号"; width: (root.width / 13) * 2;  }
        TableViewColumn { role: "product_name"; title: "商品名称"; width: (root.width / 13) * 4; elideMode: Text.ElideRight }
        TableViewColumn { role: "product_total"; title: "数量"; width: (root.width / 13) * 1;  }
        TableViewColumn { role: "product_price"; title: "需支付金额"; width: (root.width / 13) * 2;  }
        TableViewColumn { role: "join_time"; title: "加入时间"; width: (root.width / 13) * 2;  }
        TableViewColumn { role: "order_operate"; title: "操作"; width: (root.width / 13) * 1;  }
        model: lstModel
        headerDelegate: headerDelegate
        rowDelegate: Rectangle {
            height: 40
        }
        itemDelegate: itemDelegate
    }

    Component {
        id: headerDelegate
        Rectangle {
            implicitWidth: 100
            implicitHeight: 50
            // border.color: "gray"
            Text {
                anchors.centerIn: parent
                font {
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
                text: styleData.value
            }
        }
    }
    Component {
        id: itemDelegate
        Loader {
            // Loader会将其自身设置为它正在加载的组件的上下文对象
            property var sData: styleData
            anchors.fill: parent
            sourceComponent: {
                var role = styleData.role;
                switch (role) {
                case "is_selected": return selectCheckBox;
                case "order_num": return orderNumTxt;
                case "product_name": return productNameTxt;
                case "product_total": return productTotalTxt;
                case "product_price": return productPriceTxt;
                case "join_time": return joinTimeTxt;
                case "order_operate": return orderOperateTxt;
                }
            }
        }
    }
    /************* Sub-level Component [TODO] *************/
    Component {
        id: selectCheckBox
        Rectangle {
            CheckBox {
                anchors.centerIn: parent
                checked: sData.value
            }
        }
    }
    Component {
        id: orderNumTxt
        Rectangle {
            Text {
                anchors.centerIn: parent
                font {
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
                color: "blue"
                text: sData.value
            }
        }
    }
    Component {
        id: productNameTxt
        Rectangle {
            Text {
                width: parent.width
                anchors.centerIn: parent
                horizontalAlignment: Text.AlignHCenter
                font {
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
                elide: sData.elideMode
                text: sData.value
            }
        }
    }
    Component {
        id: productTotalTxt
        Rectangle {
            property int totalNum: sData.value
            Row {
                spacing: 10
                anchors.centerIn: parent
                Rectangle {
                    id: add
                    width: 25
                    height: 25
                    color: "#157396"
                    radius: 5
                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 30
                        text: "-"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            totalNum -= 1;
                        }
                    }
                }
                Text {
                    font {
                        family: "Microsoft YaHei"
                        pixelSize: 20
                    }
                    text: totalNum
                }
                Rectangle {
                    id: sub
                    width: 25
                    height: 25
                    color: "#157396"
                    radius: 5
                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 30
                        text: "+"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            totalNum += 1;
                        }
                    }
                }
            }
        }
    }
    Component {
        id: productPriceTxt
        Rectangle {
            Text {
                anchors.centerIn: parent
                font {
                    family: "Microsoft YaHei"
                    pixelSize: 20
                    bold: true
                }
                color: "red"
                text: "￥" + sData.value
            }
        }
    }
    Component {
        id: joinTimeTxt
        Rectangle {
            Text {
                anchors.centerIn: parent
                font {
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
                text: sData.value
            }
        }
    }
    Component {
        id: orderOperateTxt
        Rectangle {
            Row {
                anchors.centerIn: parent
                spacing: 10
                Text {
                    font {
                        family: "Microsoft YaHei"
                        pixelSize: 20
                    }
                    color: "green"
                    text: "购买"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.log("购买成功！")
                            lstModel.remove(sData.row)
                        }
                    }
                }
                Text {
                    font {
                        family: "Microsoft YaHei"
                        pixelSize: 20
                    }
                    color: "red"
                    text: "删除"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            lstModel.remove(sData.row)
                        }
                    }
                }
            }
        }
    }
}
